<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name=x5-orientation content=portrait>
    <meta name=screen-orientation content=portrait>
    <title>{$title}</title>
    <link rel="stylesheet" href="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/css/义卖海报.css">
    <link rel="stylesheet" href="{SITE_URL}public/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="{SITE_URL}public/js/rem.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/html2canvas.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/smatchScreen.js"></script>
    <script type="text/javascript" src="{SITE_URL}public/js/jquery.qrcode.min.js"></script>
    <!--微信抓取缩略图-->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        /*
         * 注意：
         * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
         * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
         * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
         *
         * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
         * 邮箱地址：weixin-open@qq.com
         * 邮件主题：【微信JS-SDK反馈】具体问题
         * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
         */
        wx.config({
            debug: false,
            appId: '{php echo $signPackage["appId"]}',
            timestamp: '{php echo $signPackage["timestamp"]}',
            nonceStr: '{php echo $signPackage["nonceStr"]}',
            signature: '{php echo $signPackage["signature"]}',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
                // 所有要调用的 API 都要加到这个列表中
            ]
        });

        wx.ready(function () {
            wxOnShare();
        });

        function wxOnShare() {
            //var title = "{if $GLOBALS['TS_URL']['app']=='home' && $GLOBALS['TS_URL']['ac']=='index'}{$GLOBALS['TS_SITE']['site_title']} - {$title}{elseif $GLOBALS['TS_URL']['app']=='home' && $GLOBALS['TS_URL']['ac']!='index'}{$title}{elseif  $GLOBALS['TS_URL']['app']!='home' && $GLOBALS['TS_URL']['ac']=='index'}{$GLOBALS['TS_APP']['appname']}_{$GLOBALS['TS_SITE'][site_title]}{else}{$title}{/if}";
            var title = "{$title}-{$GLOBALS['TS_SITE']['site_title']}";
            var desc = "用微小的行动带来改变，用行动带来微小的改变";
            var link = location.href.split('#')[0];
            var imgUrl = "{$cover}";
            wx.onMenuShareAppMessage({
                title: title,
                desc: desc,
                link: link,
                imgUrl: imgUrl,
                trigger: function (res) {
                },
                success: function (res) {
                },
                cancel: function (res) {
                },
                fail: function (res) {
                }
            });
            wx.onMenuShareTimeline({
                title: title,
                link: link,
                imgUrl: imgUrl,
                trigger: function (res) {
                },
                success: function (res) {
                },
                cancel: function (res) {
                },
                fail: function (res) {
                }
            });
        }

        function getCheckboxValue(name){
            var chkObjs = document.getElementsByName(name);
            var value='';
            for(var i=0;i<chkObjs.length;i++){
                if(chkObjs[i].checked){
                    if(i==0){
                        value=chkObjs[i].value;
                    } else {
                        value=value+','+chkObjs[i].value;
                    }
                }
            }
            return value;
        }


        function in_array(stringToSearch, arrayToSearch) {
            for (s = 0; s < arrayToSearch.length; s++) {
                thisEntry = arrayToSearch[s].toString();
                if (thisEntry == stringToSearch) {
                    return true;
                }
            }
            return false;
        }

        function Trim(str){
            str = str.replace(/<(?!img).*?>/g,"");
            str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
            return str;
        }


    </script>

</head>
<body>
<!--画报-->
<div class="poster" data-id="poster">
    <div class="container" data-id="container">
    <div class="user-info">
        <div class="photo"><img class="image" src="{$strGift[user][face]}" alt="头像"></div>
        <div class="name">{$strGift[user][username]}</div>
    </div>
    <div class="word-box">
        <div class="title">{$strGift[title]}</div>
        <div class="desc">识别下方二维码下单购买</div>
    </div>
    <div class="work" style="background-image: url({php echo tsXimg($strGift[photo],'gift',500,'',$strGift[path])})"></div>
    <div class="qr-code" id="qr-code1"><img width="100" height="100"  src="{SITE_URL}uploadfile/gift/qrcode/{$giftid}.png" alt="头像"></div>
    </div>
</div>

<!--操作按钮-->
<div class="download-image">
    <div class="button" data-bind="download">
        <img src="" alt="图片" class="poster-image" data-id="image">
        <span style="padding: 20px">长按这里下载图片<i class="fa fa-download" aria-hidden="true"></i></span>
    </div>
</div>
<script>
    $(function () {
        // 初始化一屏幕的高度
        var clientHeight = document.documentElement.clientHeight;
        $("[data-id='poster']").css({height:clientHeight+'px'});
        // 缩放图片
        SmatchScreen($("[data-id='container']").get(0), 'v-v', 750, 1334, false, false);

        // 获取屏幕的宽高
        $("[data-id='qr-code']").qrcode({
            width:188,
            height:188,
            render:'table',
            foreground:'#000',
            background:'transparent',
            text:'www.baidu.com'
        })

        // 此处是生成图片
        window.onload=function(){
            var screenRate = clientHeight / 1334
            html2canvas($("[data-id='container']").get(0),{
                useCORS:true,
                width:750*screenRate,
                height:1334*screenRate
            }).then(canvas => {
                var imgUrl = canvas.toDataURL();
            $('[data-id="image"]').attr('src',imgUrl)
        });
    }
    })
</script>
</body>
</html>